<!--积分明细-->
<template>
  <div>
    <head-nav></head-nav>
    <div class="zanwei-top"></div>
    <div class="integralBox">
      <div class="detailBox">
        <div class="vipName">
          <p>会员: <span>{{userInfo.XF_SURNAME}}</span></p>
          <p v-if="currentItem">{{currentItem.XF_TXDATETIME}}</p>
        </div>
        <div class="zjxf">
          <p v-if="currentItem">{{currentItem.mxxq}}</p>
          <p v-if="currentItem">{{currentItem.xfjl}}</p>
        </div>
        <div class="availJf" :style="backgroundColor">
          <p>当前可用积分:{{userInfo.JFSUM.XF_BONUS ? userInfo.JFSUM.XF_BONUS : 0}}</p>
        </div>
      </div>
      <div class="jfmx">
        <div class="jfmx_top">
          <span>积分明细</span>
          <router-link :to="{path:'/moreIntegralDetail'}">
            <span>更多></span>
          </router-link>

        </div>
        <ul class="jfmxlist">
          <li v-for=" jfItem in jfList" @click="selectItem(jfItem)">
            <div class="jfmxitem">
              <p>{{jfItem.XF_TXDATETIME}}</p>
              <p>{{jfItem.XF_BONUS>0?"+"+jfItem.XF_BONUS:jfItem.XF_BONUS}} 积分</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- <div class="jfmx">
        <p class="jfmx_top">积分规则</p>
        <div>
          <table>
            <tr>
              <th v-for="colum in columnList">{{colum}}</th>
            </tr>
            <tr v-for="info in infoList">
              <td align="center">{{info.bl}}</td>
              <td>{{info.fw}}</td>
            </tr>
          </table>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
  import api from "@/api/api.js";
  import {MessageBox, Toast} from "mint-ui";

  export default {
    data() {
      return {
        jfList: [ ],
        columnList: ['积分比例', '业务范围'],
        infoList: [
          {bl: '1 元 = 1积分', fw: '女装、男装、女鞋、男鞋、手袋、箱包、化妆品、饰品、儿童服、日用品、床上用品等'},
          {bl: '10 元 = 1积分', fw: '珠宝、名表、小家电'},
          {bl: '50 元 = 1积分', fw: '黄金'}
        ],
        currentItem: {},
        userInfo: {
          JFSUM: ''
        }
      };
    },
    methods: {
      selectItem(jfItem) {
        this.currentItem = jfItem;
      }
    },
    mounted() {
      let that = this;

      api.getUserInfo(this, res => {
        let data = res.data;
        if (data.code === 0) {
          that.userInfo = res.data.data
          console.log(res.data.data)
        } else if(data.code === 9999){
          //orcal数据库异常 关闭当前窗口
          MessageBox.alert(data.msg, '温馨提示').then(action => {
            wx.closeWindow()
          })
        }else {
          MessageBox('提示', data.msg)
        }
      });
      let vipcode = JSON.parse(sessionStorage.getItem('userinfo')).vipcode;
      api.getUserJfList(this, vipcode, 3, 1, res => {
        let data = res.data;
        if (data.code === 0) {
          let datas = JSON.parse(data.data);
          let list = datas.rows;
          for (let i = 0; i < list.length; i++) {
            let timestamp = list[i].XF_TXDATETIME.time;
            let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let Y = date.getFullYear() + '/';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) +
              '/';
            let D = date.getDate() + '';
            D.length === 1 ? D = '0' + D + '  ' : D = D + ' ';
            let h = date.getHours() + ':';
            h.length === 2 ? h = '0' + h : h;
            let m = date.getMinutes().toFixed() + ':';
            m.length === 2 ? m = '0' + m : m;
            let s = date.getSeconds().toFixed();
            s.length === 1 ? s = '0' + s : s;
            list[i].time = Y + M + D + h + m + s;
            if (list[i].XF_REMARK === 'W2') {
              list[i].xfjl =
                list[i].XF_BONUS > 0 ? '增加积分' + list[i].XF_BONUS + '积分' : "减少积分" + Math.abs(list[i].XF_BONUS) + "积分";
            } else if (list[i].XF_REMARK === 'W1') {
              list[i].xfjl = '绑定会员,赠送' + list[i].XF_BONUS + "积分";
            } else {
              list[i].xfjl = list[i].XF_REMARK;
            }
          }
          list.sort(function (n,m) {
          	return m.XF_TXDATETIME.time - n.XF_TXDATETIME.time;
          });
          that.jfList = list;
          this.currentItem = this.jfList[0];
        }
      })
    }
  }

</script>

<style scoped lang="less">
  table, table tr th, table tr td {
    border: 1px solid #000
  }

  li {
    list-style: none
  }

  .integralBox {
    padding: .05rem .3rem;
    background: #FFF;
    .detailBox {
      background: #dcdcdc;
      .vipName {
        font-size: .3rem;
        margin: .3rem;
        padding: .3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px #eee solid;
      }
      .zjxf {
        padding: 0 0 .3rem 0;
        text-align: center;
        p {
          /*font-size: 18pt;*/
          font-size: .43rem;
        }
        p:nth-child(2) {
          color: red;
          font-weight: bold;
          padding: 0 .4rem;
        }
      }
      .availJf {
        background: #F05DC4;
        /*font-size: .32rem;*/
        padding: .2rem;
        color: #ffffff;
      }
    }
    .jfmx {
      margin-top: .3rem;
      div {
        padding: .1rem;
        margin-top: .3rem;
        table {
          width: 100%;
          border-collapse: collapse;
          padding: 2px;
          font-size: .23rem;
          tr {
            th {
              padding: .2rem;
            }
            th:nth-child(1) {
              width: 30%;
            }
            th:nth-child(2) {
              width: 70%;
            }
            td {

              padding: .05rem;
              line-height: .5rem;
            }
          }
        }
      }
      ul {
        margin-top: .1rem;
        height: 6.1rem;
        overflow-y: scroll;
        li {
          .jfmxitem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .05rem;
            margin-top: 0;
            font-size: .3rem;
          }
        }
      }
      .jfmx_top {
        display: flex;
        justify-content: space-between;
        padding: .1rem;
        line-height: .5rem;
        border-bottom: 1px solid #888;
        font-size: .32rem;
        span:nth-child(1) {
          font-weight: bold;
        }
      }
    }
  }


</style>
